

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加商品</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"
	media="all">
<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
<style type="text/css">
.preview-size {
	width: 113px;
	height: 85px;
	margin: 0 10px 10px 0;
}
.viewcover{
	margin-left: 110px;
}
</style>
</head>
<body>
	<form id="form-botton" class="layui-form" lay-filter="new-form">
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body" pad15>

							<div class="layui-form" lay-filter="new-form">
								<div class="layui-form-item" style="display: none;">
									<label class="layui-form-label">商品id:</label>
									<div class="layui-input-block">
										<input type="text" name="pid" lay-verify="required"
											lay-verType="tips" class="layui-input" th:value="${pro.pid}"
											style="display: none;">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品种类:</label>
									<div class="layui-input-block">
										<select name="cid" lay-filter="cid">
											<option value="">请选择种类</option>
											<option th:each="cat : ${cats}" th:value="${cat.cid}"
												th:text="${cat.name}" th:selected="${cat.cid eq pro.cid}"}></option>
										</select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品标题:</label>
									<div class="layui-input-block">
										<input type="text" name="title" lay-verify="required"
											lay-verType="tips" class="layui-input"
											th:value="${pro.title}">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品简介:</label>
									<div class="layui-input-block">
										<input type="text" name="sellPoint" lay-verType="tips"
											autocomplete="off" id="LAY_password" class="layui-input"
											th:value="${pro.sellPoint}">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品价格:</label>
									<div class="layui-input-block">
										<input type="text" name="price" lay-verType="tips"
											autocomplete="off" id="LAY_password" class="layui-input"
											th:value="${pro.price}">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品库存:</label>
									<div class="layui-input-block">
										<input type="text" name="stock" lay-verType="tips"
											autocomplete="off" id="LAY_password" class="layui-input"
											th:value="${pro.stock}">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">封面图片</label>
									<div class="layui-input-block">
										<input type="hidden" name="cover" autocomplete="off"
											class="layui-input" id="cover" th:value="${pro.cover}">
										<button type="button" class="layui-btn" id="test1">
											<i class="layui-icon">&#xe67c;</i>上传图片
										</button>
										<div class="layui-upload-list" id="preview1">
											<i class="layui-icon coverdel" >&#x1006;</i> <img th:src="${pro.cover}"
												class="layui-upload-img preview-size size1">
										</div>
									</div>
									<div class="layui-form-item">
									<label class="layui-form-label">浏览图片:</label>
										<div class="layui-input-block" id="imgs">
											<input th:each="img : ${imgs}" type="hidden" name="imgs" autocomplete="off"
												class="layui-input" id="images" th:value="${img.url}">
											<button type="button" class="layui-btn" id="test2">
												<i class="layui-icon">&#xe67c;</i>上传图片
											</button>
											<div class="layui-upload-list" id="preview2">
											<div class="layui-input-inline cover2" th:each="img2 : ${imgs}">
												<i class="layui-icon coverdel1">&#x1006;</i><img 
													th:src="${img2.url}" class="layui-upload-img preview-size">
											</div>
											</div>
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">商品详情:</label>
										<div class="layui-input-block">
											<textarea id="description" name="description"
												th:text="${pro.description}"></textarea>
										</div>
									</div>
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn" lay-submit lay-filter="save"
												id="save">保存</button>
											<button type="reset" style="display: none;">重置</button>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
	</form>
	<script src="/layuiadmin/layui/layui.js"></script>
	<script>
		layui
				.config({
					base : '/layuiadmin/' //静态资源所在路径
				})
				.extend({
					index : 'lib/index' //主入口模块
				})
				.use(
						[ 'index', 'set', 'form', 'layedit', 'upload' ],
						function() {
							var form = layui.form, $ = layui.$;
							var layedit = layui.layedit;
							var upload = layui.upload;
							var newindex = layedit.build('description')
							

							var upload1 = upload
									.render({
										elem : '#test1' //绑定元素
										,
										url : '/product/cover' //上传接口
										,
										before : function(obj) {
											//预读本地文件示例，不支持ie8
											obj
													.preview(function(index,
															file, result) {
														$('#preview1')
																.append(
																		'<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img preview-size">'); //图片链接（base64）
													});
										},
										done : function(res) {
											//上传完毕回调
											$("#cover").empty().val(
													res.data.src);
										},
										error : function() {
											//请求异常回调
										}
									});
							var upload2 = upload
									.render({
										elem : '#test2',
										multiple : true,
										url : '/product/cover',
										before : function(obj) {
											//预读本地文件示例，不支持ie8
											obj
													.preview(function(index,
															file, result) {
														$('div#preview2')
																.append(
																		'<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img preview-size">');
													});
										},
										done : function(res) {
											var newimgs = $(
													'<input type="hidden" name="imgs"/>')
													.val(res.data.src)
											$("#imgs").append(newimgs);
										},
										error : function() {
										}
									});

							form
									.on(
											'submit(save)',
											function(data) {
												layedit.sync(newindex);
												$.ajax({
															url : "/product/updata",
															type : "post",
															data : $('form').serialize(),
															dataType : "json",
															success : function(
																	res) {
																if (res.code == 0) {
																	if (res.code == 0) {
																		var index = parent.layer
																				.getFrameIndex(window.name); //先得到当前iframe层的索引
																		window.parent.layer
																				.close(index); //再执行关闭 
																	}
																}
															}
														})
												return false;

											});
							
							$(document).on("click", ".coverdel", function(event){
					            $('.size1').remove();  
					        });
							$(document).on("click", ".coverdel1", function(event){
								$.ajax({
									url : "/image/del",
									type : "post",
									data : $('form').serialize(),
									dataType : "json",
									success : function(res) {
									}
								})
					            $('coverdel1').remove();
								$('.cover2').remove();  
					        });
								//多图片文件列
							var demoListView = $('#demoList'), uploadListIns = upload
									.render({
										elem : '#testList',
										url : '/product/cover' //改成您自己的上传接口
										,
										accept : 'file',
										multiple : true,
										auto : false,
										bindAction : '#testListAction',
										choose : function(obj) {
											var files = this.files = obj
													.pushFile(); //将每次选择的文件追加到文件队列
											//读取本地文件
											obj
													.preview(function(index,
															file, result) {
														var tr = $([
																'<tr id="upload-'+ index +'">',
																'<td>'
																		+ file.name
																		+ '</td>',
																'<td>'
																		+ (file.size / 1024)
																				.toFixed(1)
																		+ 'kb</td>',
																'<td>等待上传</td>',
																'<td>',
																'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
																'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
																'</td>',
																'</tr>' ]
																.join(''));

														//单个重传
														tr
																.find(
																		'.demo-reload')
																.on(
																		'click',
																		function() {
																			obj
																					.upload(
																							index,
																							file);
																		});

														//删除
														tr
																.find(
																		'.demo-delete')
																.on(
																		'click',
																		function() {
																			delete files[index]; //删除对应的文件
																			tr
																					.remove();
																			uploadListIns.config.elem
																					.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
																		});

														demoListView.append(tr);
													});
										},
										done : function(res, index, upload) {
											if (res.files.file) { //上传成功
												var tr = demoListView
														.find('tr#upload-'
																+ index), tds = tr
														.children();
												tds
														.eq(2)
														.html(
																'<span style="color: #5FB878;">上传成功</span>');
												tds.eq(3).html(''); //清空操作
												return delete this.files[index]; //删除文件队列已经上传成功的文件
											}
											this.error(index, upload);
										},
										error : function(index, upload) {
											var tr = demoListView
													.find('tr#upload-' + index), tds = tr
													.children();
											tds
													.eq(2)
													.html(
															'<span style="color: #FF5722;">上传失败</span>');
											tds.eq(3).find('.demo-reload')
													.removeClass('layui-hide'); //显示重传
										}
									});
						});
	</script>
</body>
</html>